<template>
  <a-drawer
    v-model:visible="visible"
    width="1000px"
    unmount-on-close
    :title="taskName"
    @cancel="close"
  >
    <!--流程信息-->
    <a-descriptions
      bordered
      align="left"
      layout="vertical"
      :column="2"
      :data="instanceDetail"
    />

    <!-- 流程状态 -->
    <process-status :process-status="flowInstance.status" />

    <!-- 表单数据 -->
    <a-card title="表单数据" :loading="formLoading">
      <form-render
        ref="flowFormRef"
        v-model:model="formModel"
        :form-disable="!mode"
        :form-permission="formPermission"
        :form-config="formConfig"
        :form-list="formList"
      />
    </a-card>
    
    <!-- 审批记录 -->
    <card-history
      v-if="flowInstance.processInstanceId"
      :process-instance-id="flowInstance.processInstanceId"
    />

    <!--流程图-->
    <card-flow-graph
      v-if="currentTask.flowProcess && currentTask.flowProcess.processData"
      :process-instance-id="flowInstance.processInstanceId"
      :process-data="currentTask.flowProcess.processData"
    />

    <!-- 审批表单 -->
    <template #footer>
      <a-form
        ref="auditFormModelRef"
        v-if="mode"
        v-model="auditFormModel"
        label-align="left"
        layout="vertical"
        :label-col-props=labelColProps
        :wrapper-col-props=wrapperColProps
        :rules="rules"
      >
        <a-row justify="space-between">
          <a-col :span="24">
            <a-form-item
              field="processGroupId"
              tooltip=""
              label="审批意见"
              validate-trigger="blur"
            >
              <a-textarea
                v-model="auditFormModel.opinion"
                placeholder="请输入审批意见"
                allow-clear
                show-word-limit
                :max-length="150"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 操作按钮 -->
      <a-row justify="end">
        <a-button-group>
          <a-button
            :disabled="loading"
            @click="cancel"
          >
            取消
          </a-button>
          <a-button
            v-if="mode && operate.indexOf('REFUSE') !== -1"
            type="primary"
            status="danger"
            :loading="loading"
            @click="submit(false)"
          >
            拒绝
          </a-button>
          <a-button
            v-if="mode && operate.indexOf('AGREE') !== -1"
            type="primary"
            :loading="loading"
            @click="submit(true)"
          >
            通过
          </a-button>
          <!-- TODO 转办任务 -->
        </a-button-group>
      </a-row>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineExpose, defineProps } from 'vue';
import { detailForm } from '@/api/system/form';
import { detailTask, completeTask } from '@/api/flow/task';
import useLoading from '@/hooks/loading';
import { labelColProps, wrapperColProps } from '@/components/dialog-add/config';
import { Message } from '@arco-design/web-vue';
import ProcessStatus from '@/views/flow/common/components/process-status.vue';
import FormRender from '@/components/form-render/index.vue';
import CardHistory from '@/views/flow/common/components/card-history.vue';
import CardFlowGraph from '@/views/flow/common/components/card-flow-graph.vue';

const emits = defineEmits(['submit']);

const props = defineProps({
  // true 审批 false 详细
  mode: {
    type: Boolean,
    default: () => {
      return false;
    }
  }
});

const { loading, setLoading } = useLoading(false);

const visible = ref<boolean>(false);

const taskName = ref();

const currentTask = ref();

const flowInstance = ref();

const flowNode = ref();

const instanceDetail = ref<Array<any>>([]);

const flowFormRef = ref();

const formLoading = ref(false);

const formModel = ref({});

const formConfig = ref();

const formList = ref();

const formPermission = ref();

const operate = ref();

const auditFormModelRef = ref();

const auditFormModel = ref({});

const rules = ref({});

const submit = async (audit: boolean) => {
  setLoading(true);
  const data = {
    taskId: currentTask.value.taskId,
    params: {
      audit,
      ...auditFormModel.value,
      formModel: formModel.value
    }
  };
  completeTask(data).then(res => {
    cancel();
    emits('submit');
    Message.success('操作成功');
  }).finally(() => {
    setLoading(false);
  });
};

const getFormDetail = (formId: string) => {
  formLoading.value = true;
  detailForm(formId).then(formRes => {
    formConfig.value = formRes.data.formConfig;
    formList.value = formRes.data.formList;
  }).finally(() => {
    formLoading.value = false;
  });
};

const initInstanceDetail = () => {
  instanceDetail.value = [];
  instanceDetail.value.push({
    label: '流程名称',
    value: currentTask.value.processName
  });
  instanceDetail.value.push({
    label: '发起人',
    value: currentTask.value.startUserName
  });
  instanceDetail.value.push({
    label: '发起时间',
    value: flowInstance.value.createTime
  });
  instanceDetail.value.push({
    label: '结束时间',
    value: flowInstance.value.endTime ? flowInstance.value.endTime : '--'
  });
};

const open = (task: any) => {
  if (!task.taskId) {
    Message.error('任务Id为空');
  }
  taskName.value = task.taskName;
  detailTask(task.taskId).then(res => {
    currentTask.value = res.data;
    flowInstance.value = res.data.flowInstance;
    flowNode.value = res.data.flowNode;
    formModel.value = res.data.flowInstance.formModel;
    formPermission.value = res.data.flowNode.nodeConfig.data.formPermission;
    operate.value = res.data.flowNode.nodeConfig.data.operate;
    initInstanceDetail();
    getFormDetail(res.data.flowProcess.formId);
    visible.value = true;
  });
};

const cancel = () => {
  visible.value = false;
};

defineExpose({
  open,
  cancel
});
</script>

<script lang="ts">
export default {
  name: 'AuditDialog'
};
</script>

<style scoped lang="less">

</style>